<!-- 规则组件 -->
<template>
  <div>
    <div class="card-title card-title-background" >时间段{{ index+1 }} <a v-if="index > 0" style="margin-left: 30px;" @click="deleteRule">删除</a></div>
    <a-form
      layout='horizontal'
      ref='form'
      :model='timeRange'
      :label-col='{ md: { span: 6 }, sm: { span: 24 } }'
      :wrapper-col='{ md: { span: 18 }, sm: { span: 24 } }'
    >
      <a-form-item label='作业起始时分,如08:00:' name='dayWorkStart'>
        <a-time-picker v-model:value='timeRange.start' format="HH:mm" valueFormat="HH:mm" placeholder='请输入时分,如08:00'
                       allow-clear autocomplete='off'/>
      </a-form-item>
      <a-form-item label='作业结束时分,如08:00:' name='dayWorkEnd'>
        <a-time-picker v-model:value='timeRange.end' format="HH:mm" valueFormat="HH:mm" placeholder='请输入时分,如08:00'
                       allow-clear autocomplete='off'/>
      </a-form-item>
    </a-form>
  </div>
</template>

<script>
export default {
  name: 'VehicleManagerVehicleUsemodelWorkruleEditSub',
  emits: ['update:value', 'change', 'deleteIndex'],
  props: {
    index : Number,
    timeRange : Object
  },
  data() {
    return {
    };
  },
  methods: {
    deleteRule () {
      this.$emit("deleteIndex", this.index);
    }
  }
};
</script>

<style lang="less" scoped>
.card-title {
  border-left: 5px solid;
  border-color: var(--primary-color);
  padding-left: 10px;
}

.card-title-background {
  background-color: #f5f5f5;
  height: 2em;
  line-height: 2em;
  margin-bottom: 2em;
}
</style>
